/* eslint-disable array-callback-return */
import React,{useState,useEffect} from 'react'
import "./Toggle.less"
import {Qie,Qie2,Qie3} from '@/request/api'
import { useNavigate } from 'react-router-dom';
import {useDispatch,useSelector} from "react-redux"
export default function Toggle() {
  let homeTitle = useSelector((state:Istore)=>state.homeTitle)
  let actionCode2 = useSelector((state:Istore)=>state.actionCode)
  let dispatch = useDispatch();
  let navigate = useNavigate()
  let [list,setlist] = useState<any>([]);
  let [list2,setlist2] = useState<any>([]);
  let [moren,setmoren] = useState("Linux面试题")
  let [ce,setce] = useState("none")
  let [value1,setvalue1] = useState(0)
  let [title,settitle] = useState("Java面试题")
  let [actionCode,setactionCode] = useState("1334411120332562433")
  const GetQie = async() =>{
    let res = await Qie()
    let res2 = await Qie2(actionCode2)
    
    setlist(res.data);
    setlist2(res2.data)
    console.log(res);
  }
  const she=()=>{
    setce("block")
    console.log(ce);
    
  }
  const hui=()=>{
    setce("none")
    console.log(ce);
  }
  // 选择左侧学科
  const xuan = async (v:string,n: number,title:any) => {
    console.log(v);
    console.log(n);
    
    let res2 = await Qie2(v)
    let res3 = await Qie3(v)
    console.log(res2);
    console.log(res3);
    setlist2(res2.data)
    setvalue1(n)
    settitle(title)
    setactionCode(v)
    dispatch({
      type:"hometitle",
      value:{a1:title,a2:v}
    })
    
  }
  // 设置默认学科
  const shemo = () =>{
      dispatch({
        type:"hometitle",
        value:{a1:homeTitle,a2:actionCode2}
      })
  
    navigate("/home")
  }
  // 进入时根据actionCode请求下面列表
  // const qiuqiu=()=>{
  //   let res2 = await Qie2(v)
  // }
  useEffect(()=>{
    // 请求接口
    GetQie()
  },[])
  return (
    <div className='Toggle' >
      <div className='ce' style={{display:ce}}>
        {
              list.map((item: { id: React.Key | null | undefined; actionCode: any; title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; },index: number)=>{
                return <div key={item.id} className={value1===index?"active":"kuangkuang"}onClick={()=>{xuan(item.actionCode,index,item.title)}}>{item.title}</div> }
              )
        }
      </div>
      <div className='you' style={{display:ce}} onClick={hui}></div>
      <div className='top'>
        <div className='left'>首页显示学科-{homeTitle}</div>
        <div className='right' onClick={shemo}>设置默认学科</div>
      </div>
      <div className='title' onClick={she}>{homeTitle}</div>
      <div className='xia'>
        <div className='title'>
          <div>
            {
              list2.map((item: { id: React.Key | null | undefined; title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; })=>{
                return <div key={item.id} className="item1">{item.title}</div>
              })
            }
          </div>
        </div>
      </div>
    </div>
  )
}
